<template>
	<view class="cardbody">
		<u-navbar back-text="卡券" :border-bottom="false" :back-text-style="textStyle" back-icon-color="#000000" style="font-weight: bold;font-family: PingFang SC;"></u-navbar>
		<mescroll-body top="0" :down="downOption" :up="upOption" :height="comHeight" ref="mescrollRef" @init="mescrollInit" @down="downCallback">
			<view style="width: 92%;margin: auto;padding-top: 20rpx;">
				<view style="" v-for="(item, index) in cards" :key="index">
					<view class="card_name" style="">{{ item.name }}</view>
					<view class="card_bj" style="position: relative;" v-for="(itee, indexs) in item.num" :key="indexs">
							<view class="card_bj" style="position: relative;" @click="itee.isOpen == '1'?goMember():lingqu(itee)">
								<image style="height:176rpx ;width: 100%;" :src="index == 1 ? backImg.gimg : vipImg "></image>
								<view style="position: absolute;left: 0;top: 0;width: 100%;">
									<view style="width: 100%;margin: auto;overflow: hidden;">
										<!-- 满减卷 -->
										<view style="width:30% ;float: left;text-align: center;" v-if="itee.counponsType == 0"> 
											<view
											:style="{ color: index == 1 ? '#fff' : '#F9D0A4' }"
											 style="font-size:56rpx ;font-weight: bold;padding-top: 28rpx;">
												<text style="font-size: 28rpx;">￥</text>
												{{ itee.price }}
											</view>
											<view
											:style="{ color: index == 1 ? '#fff' : '#F9D0A4' }"
											 style="font-size:24rpx ;line-height: 48rpx;">满{{ itee.limitation }}元可用</view>
										</view>
										<!-- 折扣卷 -->
										<view style="width:30% ;float: left;text-align: center;" v-else>
											<view 
											:style="{ color: index == 1 ? '#fff' : '#F9D0A4' }"
											style="font-size:56rpx ;font-weight: bold;padding-top: 28rpx;">								
												{{itee.fmtDiscountStr}}
											</view>
											<view
											 :style="{ color: index == 1 ? '#fff' : '#F9D0A4' }"
											 style="font-size:24rpx ;line-height: 48rpx;">无门槛使用</view>
										</view>
										<!-- 已领取 -->
										<view style="width: 70%;float: right;">
											<view style="width: 93%;margin: auto;display: flex;">
												<view style="width: 90%;">
													<view class="card_text"
													 :style="{ color: index == 1 ? '#333333' : '#F9D0A4' }"
													 style="font-weight: bold; font-size:30rpx ;padding: 36rpx 16rpx 12rpx 20rpx;">{{itee.fmtName}}</view>
													<view class="card_text"
													:style="{ 'line-height': itee.limitType!== 1 && itee.limitType !== 3 ? '86rpx' : '48rpx',
													color: index == 1 ? '#6F6F6F' : '#FFFFFF'
													 }"
													style="font-size:22rpx ;color: #3F3F3F;padding: 0rpx 0rpx 0rpx 20rpx;">
														有效期至{{ itee.endDatetime }}
													</view>
													<view class="card_text"
													 :style="{ color: index == 1 ? '#979797' : '#FFFFFF' }"												 
													 style="padding: 0rpx 0rpx 0rpx 20rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 20rpx;line-height: 34rpx;">
														{{itee.activityType == 1 || itee.activityType == 3 ? '#仅限'+ itee.activityName+'活动商家使用#':''}}
													</view>	
												</view>
												<view
													v-if="itee.isOpen == '0'"
												 :style="{ color: index == 1 ? '#FF7D55' : '#FFFFFF' }"	
												 style="text-align: center;width: 5%;margin-top: 30rpx;">去<br />使<br />用</view>
												 <view v-else style="text-align: center;width: 5%;margin-top: 30rpx;color: #ffffff;">
												 	去
												 	<br />
												 	开
												 	<br />
												 	通
												 </view>
											</view>
										</view>
										
									</view>
								</view>
							</view>
							<!-- 原优惠卷样式 -->
						<!-- <image style="height:176rpx ;width: 100%;" src="https://beedao.oss-cn-beijing.aliyuncs.com/cdbde831ebd846e599a2db5f9f7f60d4.png"></image>
						<view style="position: absolute;left: 0;top: 0;width: 100%;">
							<view style="width: 100%;margin: auto;overflow: hidden;">
								<view style="width:22% ;float: left;text-align: center;">
									<view style="font-size:50rpx ;font-weight: bold;color: #F29423;padding-top: 36rpx;">
										<text style="font-size: 40rpx;">￥</text>
										{{ itee.price }}
									</view>
									<view style="font-size:20rpx ;color: #F29423;line-height: 35rpx;">{{ itee.limitation }}</view>
								</view>
								<view style="width: 78%;float: right;">
									<view style="width: 93%;margin: auto;">
										<view style="width: 70%;">
											<view style="font-size:26rpx ;color: #3F3F3F;padding: 26rpx 0rpx 30rpx 0rpx;">{{ itee.couponsName }}</view>
											<view class="card_text" style="">{{ itee.description }}</view>
											<view class="card_text">有效期至{{ itee.endDatetime }}</view>
										</view>

										<view @click="lingqu(itee)" class="car_but" v-if="item.id==2">去使用</view>
									</view>
								</view>
							</view>
						</view> -->
					</view>
				</view>
				<view style="margin: 40rpx 0;">
					<u-divider color="#DEDEDE" half-width="120" border-color="#DEDEDE">{{prompt}}</u-divider>
				</view>
			</view>
		</mescroll-body>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				textStyle: {
					color: '#272755'
				},
				downOption: {
					use: true,
					auto: false,
					offset: 40
				},
				upOption: {
					use: false
				},
				backImg: {
					gimg: 'https://beedao.oss-cn-beijing.aliyuncs.com/aea18911a6d14cd3adf753ceb261a190.png',
					img: 'https://beedao.oss-cn-beijing.aliyuncs.com/d966eed886cc43a38845e04af918d0f8.png'
				},//领取优惠卷背景图
				vipImg:"https://beedao.oss-cn-beijing.aliyuncs.com/c0c2db435e6e4a50bd024b97133fd290.png",
				mescroll: null,
				prompt: '没有更多了',
				page: 1,
				countPage:0,
				cards: [{
						name: '',
						num: [],
						id: 1
					},
					{
						name: '',
						num: [],
						id: 2
					}
				],
				comHeight:0
			};
		},
		onLoad() {
			that = this;
			var menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			const {
				top,
				width,
				height,
				right
			} = menuButtonInfo;
			uni.getSystemInfo({
				success: res => {
					const {
						statusBarHeight
					} = res;
					const margin = top - statusBarHeight;
					var navHeight = height + statusBarHeight + margin * 4;
					that.comHeight = (res.windowHeight  - navHeight) + 'px';
				}
			});
			that.page = 1;
			this.prompt = '加载中....';
			that.cards[0].num = [];
			that.cards[1].num = [];
			that.cards_list(1);
			that.cards_list(0);
		},
		onShow() {},

		onReachBottom() {
			if(this.page <this.countPage){
				that.page += 1;
				that.cards_list(1);
				that.cards_list(0);
			}
			
		},
		methods: {
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			// 下拉刷新回调函数
			downCallback() {
				setTimeout(() => {
					this.page = 1,
						that.cards[0].num = [];
					that.cards[1].num = [];
					this.prompt = '加载中....';
					that.cards_list(1);
					that.cards_list(0);
					this.mescroll.endSuccess();
				}, 500)
			},
			
			// 去开通会员
			goMember() {
				uni.navigateTo({
					url: '/pageageA/member/meCenter'
				});
			},
			// 去使用商家优惠券
			lingqu(item) {
				uni.navigateTo({
					url: '/pageageA/placeOrder/selectService?businessId=' + item.businessId 
				});
			},
			// 活动优惠券列表
			cards_list(numt) {
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'coupon/my/page'
				};
				let data = {
					counponsGenre: numt,
					page: that.page,
					pageSize: 15
				};
				this.http.httpTokenRequest(opts, data).then(res => {
					//打印请求返回的数据
					if (res.code == '200') {
						if (res.data.records.length > 0) {
							this.countPage= res.data.pages;
							if (that.page = 1) {
								var array=res.data.records;
								array.forEach((item)=>{
									item.endDatetime=item.endDatetime.substring(0, 10)
									item.startDatetime=item.startDatetime.substring(0, 10)
								})
								
								if (numt == 1) {
									that.cards[0].num = array;
									if(that.cards[0].num.length > 0){
										that.cards[0].name = '会员专属红包';
									}
									
								}
								if (numt == 0) {
									that.cards[1].num = array;
									if(that.cards[1].num.length > 0){
										that.cards[1].name = '普通优惠券';
									}
									
								}
							} else {
								that.cards[numt].num = that.cards[numt].num.concat(res.data.records);
							}
							if (res.data.records.length <= 15) {
								this.prompt = '没有更多了';
							} else {
								this.prompt = '加载中';
							}

						} else if (res.data.records.length == 0) {

							this.prompt = '没有更多了';
						}
					} else {
						this.$refs.uToast.show({
							title: res.message,
							type: 'error'
						});
					}
				});
			}
		}

	};
</script>

<style>
	.cardbody {
		width: 100%;
		margin: auto;
	}
	.card_text {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #979797;
		font-size: 20rpx;
		line-height: 35rpx;
	}
	.card_bj {
		width: 100%;
		margin: auto;
		height: 176rpx;
		margin-bottom: 40rpx;
	}

	.card_bj img {
		width: 100%;
		height: 100%;
	}

	.card_name {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #272755;
		font-size: 30rpx;
		padding: 0rpx 0rpx 25rpx 0rpx;
		font-weight: bold;
	}


	.car_but {
		text-align: center;
		line-height: 48rpx;
		width: 134rpx;
		height: 48rpx;
		position: absolute;
		bottom: 50rpx;
		right: 20rpx;
		border-radius: 32rpx;
		font-size: 30rpx;
		color: white;
		background: linear-gradient(139deg, #ffa63b 0%, #ff6600 100%);
		box-shadow: 0px 5px 5px rgba(255, 168, 37, 0.39);
	}
</style>
